<template>
  <div>
    <Header class="header">
      <template slot="header">
        <slot name="header"></slot>
      </template>
    </Header>
    <Main>
      <template slot="main" class="slot">
        <slot name="main"> </slot>
      </template>
    </Main>
  </div>
</template>

<script>
export default {
  components: {
    Header: () => import("./Header.vue"),
    Main: () => import("./Main.vue"),
  },
};
</script>

<style lang="less" scoped>
.header {
  position: relative;
  z-index: 1;
}
.slot,
.slot /deep/ div {
  height: 100%;
}
</style>